import React from "react";
import './App.css';
//导入视频组件
import Video from './Video';

export default class App extends React.Component {
  render() {
    //声明数组
    let hotVideos = [
      {
        title: "中文版BeautyBox视频磨皮美颜插件",
        author: "爱生活的乐先生",
        img: "https://picsum.photos/400/300?image=12",
        isLiving: true
      },
      {
        title: "中国妖怪历史发展与远渡东瀛",
        author: "一刻talks",
        img: "https://picsum.photos/400/300?image=13",
      },
      {
        title: "探索城市中可以让你休闲娱乐一整天小鹏展厅",
        author: "R视觉",
        img: "https://picsum.photos/400/300?image=14",
      },
      {
        title: "指尖轻触，幻化百变桌面互动投影装置",
        author: "数艺网",
        img: "https://picsum.photos/400/300?image=15",
        isLiving: true
        
      },
      {
        title: "全球首创， IV重型火箭在佛罗里发射启动",
        author: "数艺网",
        img: "https://picsum.photos/400/300?image=16",
      },
      {
        title: "夏天的风 森林篇  #Kobe24#",
        author: "金梓江",
        img: "https://picsum.photos/400/300?image=17",
        isLiving: true

      },
      
      {
        title: "夏天的风 都市篇 #BOSTON 11#",
        author: "金梓江",
        img: "https://picsum.photos/400/300?image=18",
      },
      {
        title: "来自意大利海岸的柠檬香气",
        author: "Fabrique",
        img: "https://picsum.photos/400/300?image=19",
      },
      {
        title: "穿上南半球服装的里程碑",
        author: "Fabrique",
        img: "https://picsum.photos/400/300?image=20",
        isLiving: true
      },
      {
        title: "什么时装朋克又优雅？",
        author: "Fabrique",
        img: "https://picsum.photos/400/300?image=21",
      },
      {
        title: "捷尼赛思G80/GV80优雅的完美主义者",
        author: "极车制造",
        img: "https://picsum.photos/400/300?image=22",
      },
      {
        title: "河道里捡块和田玉 能否卖出100w人民币",
        author: "萝卜报告",
        img: "https://picsum.photos/400/300?image=23",
        isLiving: true
      },
      {
        title: "导演手记——“名角”们大都有相似之处",
        author: "汤圆视频",
        img: "https://picsum.photos/400/300?image=24",
      },
      {
        title: "【IWC万国绿飞计】限量礼盒版开箱作业",
        author: "野生11",
        img: "https://picsum.photos/400/300?image=25",
      },
      {
        title: "小心这些症状，抑郁症可能已经在逼近",
        author: " Psych2Go",
        img: "https://picsum.photos/400/300?image=26",
      },
      {
        title: "“情侣冷战”用英文怎么说？",
        author: "Tommy美语",
        img: "https://picsum.photos/400/300?image=27",
      },
      {
        title: "主播真会玩主机篇番外篇",
        author: "起小点是大腿",
        img: "https://picsum.photos/400/300?image=28",
      },
      {
        title: "保持专注：11个心理提示",
        author: " Psych2Go",
        img: "https://picsum.photos/400/300?image=29",
      },
      {
        title: "我们唯一的家园，地球",
        author: " Pick Up Limes",
        img: "https://picsum.photos/400/300?image=30",
      },
      {
        title: "与人交流，也需要技巧",
        author: "BRAINY DOSE ",
        img: "https://picsum.photos/400/300?image=31",
      },
    ];
    
    return <div className="video-container">
      <h1>视频列表</h1>
      <hr />
      <div className="videos-list">
        {
          hotVideos.map((item, index) => {
            //一定要写 return
            return <Video key={index} {...item} />
          })
        }
        
      </div>

    </div>;
  }
}
